import React, { useEffect, useState } from 'react'

export default function App() {

    const [bannerList, setbannerList] = useState([])
    const [count, setcount] = useState(100)

    /*
        useEffect 在不添加依赖的时候，可以在挂载，更新阶段被执行

        如果依赖项是一个空的数组，只会在挂载阶段执行

        有依赖变量，就会在挂载阶段，和依赖发生变化的时候执行

        有一个返回值，返回值可以理解为 卸载阶段的执行函数
    */


    /*
        useEffect 有两个参数
        第一个参数： 是一个回调函数，该函数绘制挂载更新和卸载阶段执行，可以替代类组件中的
        生命周期。
        第二个参数： 是一个依赖参数，只有依赖发生变化的时候该 useEffect 才会被重新执行

        setup：处理 Effect 的函数。setup 函数选择性返回一个 清理（cleanup） 函数。
        当组件被添加到 DOM 的时候，React 将运行 setup 函数。在每次依赖项变更重新渲染后，
        React 将首先使用旧值运行 cleanup 函数（如果你提供了该函数），然后使用新值
        运行 setup 函数。在组件从 DOM 中移除后，React 将最后一次运行 cleanup 函数。

        可选 dependencies：setup 代码中引用的所有响应式值的列表。响应式值包括 
        props、state 以及所有直接在组件内部声明的变量和函数。如果你的代码检查工具 
        配置了 React，那么它将验证是否每个响应式值都被正确地指定为一个依赖项。
        依赖项列表的元素数量必须是固定的，并且必须像 [dep1, dep2, dep3] 这样内联编写。
        React 将使用 Object.is 来比较每个依赖项和它先前的值。如果省略此参数，
        则在每次重新渲染组件之后，将重新运行 Effect 函数。如果你想了解更多，
        请参见 传递依赖数组、空数组和不传递依赖项之间的区别。
    */
    // useEffect(() => {
    //     fetch('http://121.89.205.189:3000/api/banner/list')
    //         .then(res => res.json())
    //         .then(res => {
    //             console.log(res.data);
    //             setbannerList(res.data)
    //         })
    // }, [])


    /*
    

    useEffect(() => {
        fetch('http://121.89.205.189:3000/api/banner/list')
            .then(res => res.json())
            .then(res => {
                console.log('数据请求发送了', res.data);
                setbannerList(res.data)
            })
        // count 发生变化的时候会重新执行该 useEffect
        // 如果添加了依赖项，可以理解为 vue 中的侦听器或者计算属性来进行使用
    }, [count])
    */


    // 一个组件中可以使用多次  useEffect


    useEffect(() => {
        console.log(11111111111);

        return () => {
            // 该函数会在下一次执行 useEffect 之前被调用
            // 清除副作用，用的函数，React 中副作用可以理解为 异步操作
            // 可以清楚我们页面中所用到的定时器，数据连接等操作
            console.log(44444444);
        }
    }, [count])

    useEffect(() => {
        console.log(2222222222);
    }, [count])

    useEffect(() => {
        console.log(3333333333);
    }, [count])
    return (
        <div>
            <h1 onClick={() => { setcount(count + 1) }}>App - {count} </h1>




            {bannerList && bannerList.map(item => {
                return <img src={item.img} key={item.bannerid} alt="" />
            })}
        </div>
    )
}
